import React, { Component } from "react";

import PropTypes from "prop-types";

// 类子组件
class Child extends Component {
  render() {
    console.log("类子组件：", this.props.children(100));
    return (
      <div>
        <h2>类子组件</h2>
      </div>
    );
  }
}

// 函数子组件
const Fnc = (props) => {
  console.log("函数子组件：", props);
  return (
    <div>
      <h2>函数子组件</h2>
      <div>{props.children}</div>
    </div>
  );
};

// props校验
const Colors = (props) => {
  const { colors } = props;
  return (
    <ul>
      {colors.map((item) => (
        <li
          style={{ background: item, padding: "10px", color: "#fff" }}
          key={item}
        >
          {item}
        </li>
      ))}
    </ul>
  );
};
// 传值校验
Colors.propTypes = {
  // key:type类型
  colors: PropTypes.array,
  abc: PropTypes.number,
  // 必传参数
  co: PropTypes.bool.isRequired,
  // 对象
  obj: PropTypes.shape({
    a: PropTypes.number,
    b: PropTypes.bool,
  }),
};

class Colors2 extends Component {
  // 校验props
  static propTypes = {
    colors: PropTypes.array,
    abc: PropTypes.number,
  };

  // 默认值
  static defaultProps = {
    abc: 100,
  };

  render() {
    const { colors, abc } = this.props;
    return (
      <ul>
        <li>{abc}</li>
        {colors.map((item) => (
          <li
            style={{ background: item, padding: "10px", color: "#fff" }}
            key={item}
          >
            {item}
          </li>
        ))}
      </ul>
    );
  }
}

// Colors2.propTypes = {
//   colors: PropTypes.array,
// };

// 根组件
class App extends Component {
  state = {
    colors: ["red", "blue", "orange"],
    colors2: ["pink", "green", "yellow"],
    obj: { a: 1, b: false },
    bo: true,
  };

  render() {
    return (
      <div>
        <h1>props深入</h1>
        <hr />
        <Fnc>123</Fnc>
        <Fnc>
          <div>
            <p>我是模版</p>
          </div>
        </Fnc>
        <hr />
        <Child>
          {(data) => {
            console.log(data);
          }}
        </Child>
        {/* colors */}
        <Colors
          co={this.state.bo}
          obj={this.state.obj}
          abc={123}
          colors={this.state.colors}
        />
        <hr />
        <Colors2 abc={123} colors={this.state.colors2} />
      </div>
    );
  }
}

export default App;
